<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="hideId" v-show="false">
        <el-input v-model="formData.payMemberConfigId" />
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="付费会员设置">
          <el-form-item label="是否开启" prop="payMemberIsEnable">
            <el-switch v-model="formData.payMemberIsEnable" style="user-select: none" />
            <el-text class="w-full" size="small" type="info">是否开启付费会员</el-text>
          </el-form-item>
          <section v-if="formData.payMemberIsEnable">
            <el-form-item label="启用渠道" prop="salesChannel">
              <el-checkbox-group v-model="formData.salesChannel">
                <el-checkbox :value="1">门店</el-checkbox>
                <el-checkbox :value="2">商城</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="线上渠道"
              prop="salesOnlineChannel"
              v-if="formData.salesChannel?.includes(2)"
            >
              <div class="w-100%">
                <el-checkbox-group v-model="formData.salesOnlineChannel">
                  <el-checkbox
                    v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_SALES_ONLINE_CHANNEL)"
                    :key="dict.value"
                    :value="dict.value"
                    >{{ dict.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-form-item>

            <el-form-item label="关联门店" v-if="formData.salesChannel?.includes(1)">
              <div class="w-100%">
                <div
                  class="p-10px w-100% border-rd-5px border-1px bg-[var(--el-color-primary-light-9)]"
                >
                  <StoreSelect v-model="formData.authorizedTenant">添加门店 </StoreSelect>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="关联商城" v-if="formData.salesChannel?.includes(2)">
              <div class="w-100%">
                <div
                  class="p-10px w-100% border-rd-5px border-1px bg-[var(--el-color-primary-light-9)]"
                >
                  <ShopSelect v-model="formData.authorizedMallTenant">添加商城 </ShopSelect>
                </div>
              </div>
            </el-form-item>
          </section>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/memberPaid/config'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

defineOptions({ name: 'MemberPaidConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<ConfigApi.ConfigVO>({
  payMemberConfigId: undefined,
  payMemberIsEnable: true, //是否开启付费会员
  salesChannel: [], //启用渠道
  authorizedTenant: [], //门店
  authorizedMallTenant: [], //商城
  salesOnlineChannel: [] // 线上商品销售渠道
})

const formRules = reactive({
  enableChannel: [required],
  salesOnlineChannel: [required]
})
const formRef = ref() // 表单 Ref

/** 修改付费会员配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ConfigApi.ConfigVO
    await ConfigApi.saveConfig(data)
    message.success(t('common.updateSuccess'))
    getConfig()
  } finally {
    formLoading.value = false
  }
}

/** 获得付费会员配置 */
const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    formData.value = data
  } finally {
  }
}

onMounted(() => {
  getConfig()
})
</script>
